<template>
	<view class="class-clockin">
		<view style="text-align: center;font-size: 30rpx;margin-bottom: 30rpx;font-weight: bold;">经度：{{longitude}}，纬度：{{longitude}}</view>
		<view id="ovalDiv" class="ovalDiv">
			<u-icon name="map" color="#2979ff" size="100"></u-icon>
			<!-- <view>点击打卡</view> -->
		</view>
		<!-- <uni-icons id="ovalDiv" class="ovalDiv" v-if="active != 5" color="rgb(250,138,75)" custom-prefix="iconfont" :type="activeIcon" size="20" /> -->
	</view>
</template>

<script>
	export default {
		data () {
			return{
				longitude: 0,
				latitude: 0
			}
		},
		methods: {
			clockin () {
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						this.longitude = res.longitude
						this.latitude = res.latitude
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.class-clockin{
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-items: center;
		justify-content: center;
		background-color: #fff;
	}
	.ovalDiv {
	  // width: 100rpx;
	  // height: 100rpx;
	  // border: 10px solid #1296db;
	  // box-sizing: border-box;
	  // border-radius: 50%;
	  // background-size:100%;
	  height: 300rpx;
	  width: 300rpx;
	  display: flex;
	  justify-content: center;
	  align-content: center;
	  border: 15rpx solid #1296db;
	  border-radius: 50%;
	  animation-name: ovalDiv;                  /*应用动画  值为div绑定的id*/
	  animation-duration: 1.5s;                 /*设置动画持续时间*/
	  animation-iteration-count: infinite;    /*使动画循环*/
	  animation-timing-function: linear;      /*使动画的速度曲线为线性增长*/
	 
	}
	 
	@keyframes ovalDiv { /* 值为div绑定的id */
	  0%{
	    //transform: scale(0.9); // 呼吸
	    opacity: 1; // 闪烁
	  }
	  50%{
	    //transform: scale(1.1);
	    opacity: 0.1;
	  }
	  100%{
	    //transform: scale(0.9);
	    opacity: 1;
	  }
	}
</style>